import React, {Component} from 'react';
import {
    StyleSheet
} from 'react-native';
import {Toast, ListRow} from 'teaset'
import {UltimateListView} from "react-native-ultimate-listview";
import {LoaderScreen, View, Text} from 'react-native-ui-lib';

import colors from "../common/colors";
import Global from '../common/global'
import Util from '../common/util'
import Api from '../common/api'


export default class WeatherList extends Component {

    static navigationOptions = {
        headerTintColor: colors.headerText,
        headerTitle: '渤海中尺度气象数据',
        headerStyle: {
            backgroundColor: colors.headerBg,
            borderBottomColor: colors.headerBottom,
            paddingTop: Global.paddingTop,
            height: Global.navigationHeaderHeight
        },
        headerTitleStyle: {
            alignSelf: 'center',
        },
        headerRight: <View/>,
        headerBackTitle: null
    }

    constructor(props) {
        super(props);

        this.state = {
            isLoading: false
        };
    }

    renderItem = (item) => {
        return (
            <ListRow
                title={item}
                titleStyle={styles.titleStyle}
                onPress={() => this.pressItem(item)}
                bottomSeparator={"none"}
            />
        )
    }

    pressItem = (item) => {
        this.props.navigation.navigate('WeatherImage', {
            title : item
        })
    }

    onFetch = (page = 1, startFetch, abortFetch) => {
        Util.fetchPost(Api.images, {})
            .then(({code, msg, data}) => {
                if (code == 0) {
                    startFetch(data.list, Global.pageSize);
                } else {
                    abortFetch()
                }
            }).catch(error => {
            abortFetch(); //manually stop the refresh or pagination if it encounters network error
            console.log(error);
            Toast.fail('网络开小差了，请稍候再试');
        });
    };

    renderSeparator = () => {
        return (
            <View style={{height: 5, backgroundColor: colors.bgColor}}/>
        )
    }

    renderEmptyView = () => {
        return (
            <View style={{height : Global.bodyHeight}} bg-white center>
                <Text dark10 text50>暂无内容</Text>
            </View>
        )
    }

    renderPaginationFetchingView = () => {
        let animationConfig = {
            animation: 'fadeOut'
        }
        return (
            <View style={{height : Global.bodyHeight, alignItems : 'center', justifyContent : 'center'}}>
                <LoaderScreen
                    color={colors.primaryColor}
                    message="加载中..."
                    overlay
                    {...animationConfig}
                />
            </View>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                <UltimateListView
                    ref="_listview"
                    onFetch={this.onFetch}
                    keyExtractor={(item, index) => ("item" + index)}  //this is required when you are using FlatList
                    refreshableMode={"basic"}//basic or advanced
                    item={this.renderItem}  //this takes three params (item, index, separator)
                    numColumns={1} //to use grid layout, simply set gridColumn > 1
                    paginationFetchingView={this.renderPaginationFetchingView}
                    pagination={false}
                    waitingSpinnerText={"加载中..."}
                    emptyView={this.renderEmptyView}
                    separator={this.renderSeparator}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.bgColor,
    },
    titleStyle: {
        fontSize: 15,
        color: '#333333'
    }
});
